<template>
  <div class="component-method-edit">
    <el-checkbox-group v-model="selected" @change="onChange">
      <el-checkbox :label="item.type" v-for="(item, index) in opts" :key="index">{{ item.label }}</el-checkbox>
    </el-checkbox-group>
    <el-row v-if="selected.find((type) => type == 1)">
      <el-col :span="4">绑定考勤机</el-col>
      <el-col :span="20">
        <SelectByApi
          v-model="kqjObj.deviceId"
          :label.sync="kqjObj.deviceName"
          placeholder="请选择考勤机"
          :api="cardList"
          :params="{ type: 'KQJ', pageSize: 999 }"
          labelFiled="name"
          valueFiled="code"
          @change="onChange"
        ></SelectByApi>
      </el-col>
    </el-row>
    <el-row v-if="selected.find((type) => type == 2)">
      <el-col :span="4">小程序考勤路线</el-col>
      <el-col :span="20">
        <SelectByApi
          v-model="appObj.routeId"
          :label.sync="appObj.routeName"
          placeholder="请选择小程序考勤路线"
          :api="roadList"
          labelFiled="name"
          valueFiled="id"
          @change="onChange"
        ></SelectByApi>
      </el-col>
    </el-row>

    <el-row v-if="selected.find((type) => type == 3)">
      <el-col :span="4">工牌考勤路线类型</el-col>
      <el-col :span="20">
        <el-radio-group v-model="cardObj.cardType" @change="onChange">
          <el-radio :label="3">固定路线范围</el-radio>
          <el-radio :label="4">自定义路线范围</el-radio>
        </el-radio-group>
        <span v-if="cardObj.cardType == 4">
          自定义路线范围需在
          <span>人员管理</span>
          中编辑考勤点
        </span>
      </el-col>
    </el-row>

    <el-row v-if="selected.find((type) => type == 3) && cardObj.cardType == 3">
      <el-col :span="4">工牌考勤路线</el-col>
      <el-col :span="20">
        <SelectByApi
          v-model="cardObj.routeId"
          :label.sync="cardObj.routeName"
          placeholder="请选择工牌考勤路线"
          :api="roadList"
          labelFiled="name"
          valueFiled="id"
          @change="onChange"
        ></SelectByApi>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { cardList } from '@/api/card';
import { roadList } from '@/api/checkRoad';
export default {
  props: {
    // [{"type":1,"data":{"deviceId":123,"deviceName":"123"}},{"type":2,"data":{"address":"s5a4dsa","radius":11}},{"type":3,"data":{"type":1,"routeId":123,"routeName":"路径名称"}}]
    value: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      selected: [],
      kqjObj: {
        deviceId: null,
        deviceName: null
      },
      appObj: {
        routeId: null,
        routeName: null
      },
      cardObj: {
        cardType: 3,
        routeId: null,
        routeName: null
      },

      opts: [
        {
          type: 1,
          label: '考勤机'
        },
        {
          type: 2,
          label: '小程序打卡'
        },
        {
          type: 3,
          label: '工牌打卡'
        }
      ]
    };
  },
  watch: {
    value: {
      handler(val) {
        this.reset();
        try {
          const list = this.value ? JSON.parse(this.value) : [];
          this.selected = list.map((item) => {
            if (item.type == 1) {
              //考勤机
              this.kqjObj = item.data;
            } else if (item.type == 2) {
              //小程序
              this.appObj = item.data;
            } else if (item.type == 3) {
              //工牌
              this.cardObj = item.data;
            }
            return item.type;
          });
        } catch (e) {
          //TODO handle the exception
        }
      },
      immediate: true
    }
  },

  methods: {
    cardList,
    roadList,
    reset() {
      this.kqjObj.deviceId = null;
      this.kqjObj.deviceName = null;

      this.appObj.routeId = null;
      this.appObj.routeName = null;

      this.cardObj.cardType = 3;
      this.cardObj.routeId = null;
      this.cardObj.routeName = null;
    },
    openRouter(path, query) {
      let routeUrl = this.$router.resolve({
        path: path || '/',
        query: query
      });
      window.open(routeUrl.href, '_blank');
    },
    onChange() {
      let list = [];
      this.selected.forEach((type) => {
        if (type == 1) {
          //考勤机
          list.push({
            type: type,
            data: this.kqjObj
          });
        } else if (type == 2) {
          //小程序
          list.push({
            type: type,
            data: this.appObj
          });
        } else if (type == 3) {
          //工牌
          list.push({
            type: type,
            data: this.cardObj
          });
        }
      });
      this.$emit('input', list.length ? JSON.stringify(list) : null);
    }
  }
};
</script>
<style lang="scss">
.component-method-edit {
  .link {
    cursor: pointer;
    color: rgb(75, 128, 228);
  }
  .el-row {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
